<html>
<head>
    <title>Canvas tutorial</title>
    <style type="text/css">
        canvas {
            border: 1px solid black;
        }
    </style>
</head>
<body>
<canvas id="tutorial" width="300" height="300"/>
</body>
<script type="text/javascript">
    let sun;
    let earth;
    let moon;
    let ctx;
    function init(){
        sun = new Image();
        earth = new Image();
        moon = new Image();
        sun.src = "sun.png";
        earth.src = "earth.png";
        moon.src = "moon.png";

        let canvas = document.querySelector("#solar");
        ctx = canvas.getContext("2d");

        sun.onload = function (){
            draw()
        }

    }
    init();
    function draw(){
        ctx.clearRect(0, 0, 300, 300); //清空所有的内容
        /*绘制 太阳*/
        ctx.drawImage(sun, 0, 0, 300, 300);

        ctx.save();
        ctx.translate(150, 150);

        //绘制earth轨道
        ctx.beginPath();
        ctx.strokeStyle = "rgba(255,255,0,0.5)";
        ctx.arc(0, 0, 100, 0, 2 * Math.PI)
        ctx.stroke()

        let time = new Date();
        //绘制地球
        ctx.rotate(2 * Math.PI / 60 * time.getSeconds() + 2 * Math.PI / 60000 * time.getMilliseconds())
        ctx.translate(100, 0);
        ctx.drawImage(earth, -12, -12)

        //绘制月球轨道
        ctx.beginPath();
        ctx.strokeStyle = "rgba(255,255,255,.3)";
        ctx.arc(0, 0, 40, 0, 2 * Math.PI);
        ctx.stroke();

        //绘制月球
        ctx.rotate(2 * Math.PI / 6 * time.getSeconds() + 2 * Math.PI / 6000 * time.getMilliseconds());
        ctx.translate(40, 0);
        ctx.drawImage(moon, -3.5, -3.5);
        ctx.restore();

        requestAnimationFrame(draw);
    }
</script>
</html>